import React, { useState } from 'react';
import type { RadioChangeEvent } from 'antd';
import { Radio, Button, message, Select } from 'antd';
import '../indexRoom.less';
import { ChangeRoomType } from '../service';
import { useDispatch } from 'react-redux';
import { changeLostRoomID, changeLostRoomNum } from '../counter/counterSlice';
import { useIntl } from '@umijs/max';
import { Read_Card } from '@/utils/Send';

/**
 * @name <OtherSettings/> 组件
 *
 * @param  onChange 整个组件都是单选框 执行指令只能执行一个
 *
 *
 *
 * */
interface prpos {
  setsendMsg: (event: object) => void;
  setType: (event: string) => void;
  userMsg: any;
  handleOk: () => void;
  setCardtime: (event: number) => void;
  setCardMessage: (event: any) => void;
}
interface Timelist {
  label: string;
  value: number;
}
const OtherSettings: React.FC<prpos> = ({
  setCardtime,
  setsendMsg,
  setType,
  userMsg,
  handleOk,
  setCardMessage,
}) => {
  const [value, setValue] = useState();
  const intl = useIntl();
  const dispatch = useDispatch();
  const onChange = (e: RadioChangeEvent) => {
    setValue(e.target.value);
  };

  const directives = async () => {
    // 写校时卡之前需要判断只能是空卡
    if (value === '写校时卡') {
      let res = await Read_Card();

      setCardMessage(res);
      setType('校时卡前判断');
    } else if (value === '0' || value === '1' || value === '2' || value === '3') {
      let status;
      if (value === '0') {
        status = 1;
      } else if (value === '1') {
        status = 2;
      } else if (value === '2') {
        status = 3;
      } else if (value === '3') {
        status = 4;
      }

      if (userMsg.status == 1 && status == 3) {
        return message.error(
          intl.formatMessage({ id: 'business.clean house cannot be turned into a house' }),
        );
      }

      if (status == 3) {
        return message.error(
          intl.formatMessage({ id: "business.You can't just set the room as a rental" }),
        );
      }
      const data = await ChangeRoomType({
        room_id: userMsg.roomId,
        status,
      });

      if (data.code === 0) {
        message.success(intl.formatMessage({ id: 'business.Room status updated successfully' }));
        handleOk();
      } else {
        message.error(data.msg);
      }
    }
    if (value === 'TuiCard') {
      let res = await Read_Card();
      if (res.msg == '空卡') return message.error(res.msg);
      setCardMessage(res);
      setType('BefoerTuiCard');
    }
    if (value === '远程开锁') {
      message.success('敬请期待');
    }

    if (value === 'lostRoomCard') {
      let res = await Read_Card();
      setCardMessage(res);
      setType('BefoerLostRoomCard');
      dispatch(changeLostRoomNum(userMsg.roomId));
      dispatch(changeLostRoomID(userMsg.roomNo));
    }
    if (value === 'ChagngelostRoomCard') {
      let res = await Read_Card();
      if (res.msg == '空卡') return message.error(res.msg);
      setCardMessage(res);
      setType('ChagngelostRoomCard');
    }
  };

  const [timeList] = useState<Timelist[]>([]);

  for (var i = 1; i <= 60; i++) {
    if (i % 5 == 0) {
      timeList.push({
        label: i + ` ${intl.formatMessage({ id: 'business.minute' })}`,
        value: i,
      });
    }
  }

  const SelectTime = (value: number) => {
    setCardtime(value);
  };

  return (
    <div className="SelectRadio" style={{ height: '465px' }}>
      <div>
        {intl.formatMessage({ id: 'business.Room settings' })} : &emsp;
        <Radio.Group onChange={onChange} value={value}>
          <Radio disabled={userMsg.status == 1} value={'0'}>
            {intl.formatMessage({ id: 'business.Clean room' })}
          </Radio>
          <Radio disabled={userMsg.status == 2} value={'1'}>
            {intl.formatMessage({ id: 'business.Messy room' })}
          </Radio>
          <Radio disabled={userMsg.status == 3} value={'2'}>
            {intl.formatMessage({ id: 'business.Checking room' })}
          </Radio>
          <Radio disabled={userMsg.status == 4} value={'3'}>
            {intl.formatMessage({ id: 'business.Repair room' })}
          </Radio>
        </Radio.Group>
      </div>
      {/* <div> 没问题 
        远程操作 : &emsp;
        <Radio.Group onChange={onChange} value={value}>
          <Radio value={'远程开锁'}>远程开锁</Radio>
          <Radio value={6}>远程挂失(普通房卡)</Radio>
        </Radio.Group>
      </div> */}
      <div>
        {intl.formatMessage({ id: 'business.Calibration operation' })} : &emsp;
        <Select
          defaultValue={10}
          style={{ width: 160 }}
          onChange={SelectTime}
          options={timeList}
        />{' '}
        &emsp;
        <Radio.Group onChange={onChange} value={value}>
          <Radio value={'写校时卡'}>
            {intl.formatMessage({ id: 'business.Write school card' })}
          </Radio>
          <Radio value={'TuiCard'}>
            {intl.formatMessage({ id: 'business.Return school card' })}
          </Radio>
        </Radio.Group>
      </div>

      {userMsg.status == 3 && (
        <div>
          {intl.formatMessage({ id: 'business.Room lost' })} : &emsp;
          <Radio.Group onChange={onChange} value={value}>
            <Radio value={'lostRoomCard'}>
              {intl.formatMessage({ id: 'business.Report lost room card' })}
            </Radio>
            <Radio value={'ChagngelostRoomCard'}>
              {intl.formatMessage({ id: 'business.Return lost room card' })}
            </Radio>
          </Radio.Group>
        </div>
      )}
      <div>
        <Button type="primary" onClick={() => directives()}>
          {intl.formatMessage({ id: 'business.Action' })}
        </Button>
      </div>
    </div>
  );
};

export default OtherSettings;
